<template>
  <div
    v-if="getMenuFixed && !getIsMobile"
    v-show="showClassSideBarRef"
    :style="getHiddenDomStyle"
  ></div>
  <!-- 
    针对场景：菜单折叠按钮为“底部”时：
    关于 breakpoint，
    组件定义的是 lg: '992px'，
    而 vben 定义的是 lg: '960px'，
    现把组件的 breakpoint 设为 md，
    则组件的 md: '768px' < vben的 lg: '960px'，
    防止 collapsedWidth 在 960px ~ 992px 之间错误设置为 0，
    从而防止出现浮动的 trigger（且breakpoint事件失效）
  -->
  <Layout.Sider
    v-show="showClassSideBarRef"
    ref="sideRef"
    :breakpoint="getTrigger === TriggerEnum.FOOTER ? 'md' : 'lg'"
    collapsible
    :class="getSiderClass"
    :width="getMenuWidth"
    :collapsed="getCollapsed"
    :collapsedWidth="getCollapsedWidth"
    :theme="getMenuTheme"
    :trigger="triggerVNode"
    v-bind="getTriggerAttr"
    @breakpoint="onBreakpointChange"
  >
    <template v-if="getShowTrigger" #trigger>
      <LayoutTrigger />
    </template>
    <LayoutMenu
      :theme="getMenuTheme"
      :menuMode="getMode"
      :splitType="getSplitType"
    />
    <DragBar ref="dragBarRef" />
  </Layout.Sider>
</template>
<script lang="ts" setup>
import { Layout } from "ant-design-vue";
import { computed, CSSProperties, h, ref, unref } from "vue";

import { MenuModeEnum, MenuSplitTyeEnum, TriggerEnum } from "@/enums/menuEnum";
import { useMenuSetting } from "@/hooks/setting/useMenuSetting";
import { useAppInject } from "@/hooks/web/useAppInject";
import { useDesign } from "@/hooks/web/useDesign";
import LayoutTrigger from "@/layouts/default/trigger/index.vue";

import LayoutMenu from "../menu/index.vue";
import DragBar from "./DragBar.vue";
import { useDragLine, useSiderEvent, useTrigger } from "./useLayoutSider";

defineOptions({ name: "LayoutSideBar" });

const dragBarRef = ref(null);
const sideRef = ref(null);

const {
  getCollapsed,
  getMenuWidth,
  getSplit,
  getMenuTheme,
  getRealWidth,
  getMenuHidden,
  getMenuFixed,
  getIsMixMode,
  getTrigger,
} = useMenuSetting();

const { prefixCls } = useDesign("layout-sideBar");

const { getIsMobile } = useAppInject();

const { getTriggerAttr, getShowTrigger } = useTrigger(getIsMobile);

useDragLine(sideRef, dragBarRef);

const { getCollapsedWidth, onBreakpointChange } = useSiderEvent();

const getMode = computed(() => {
  return unref(getSplit) ? MenuModeEnum.INLINE : null;
});

const getSplitType = computed(() => {
  return unref(getSplit) ? MenuSplitTyeEnum.LEFT : MenuSplitTyeEnum.NONE;
});

const showClassSideBarRef = computed(() => {
  return unref(getSplit) ? !unref(getMenuHidden) : true;
});

const getSiderClass = computed(() => {
  return [
    prefixCls,
    {
      [`${prefixCls}--fixed`]: unref(getMenuFixed),
      [`${prefixCls}--mix`]: unref(getIsMixMode) && !unref(getIsMobile),
    },
  ];
});

const getHiddenDomStyle = computed((): CSSProperties => {
  const width = `${unref(getRealWidth)}px`;
  return {
    width,
    overflow: "hidden",
    flex: `0 0 ${width}`,
    maxWidth: width,
    minWidth: width,
    transition: "all 0.2s",
  };
});

// 在此处使用计算量可能会导致sider异常
// andv 更新后，如果trigger插槽可用，则此处代码可废弃
const triggerVNode = h(LayoutTrigger);
</script>
<style lang="less">
@prefix-cls: ~"@{namespace}-layout-sideBar";

.@{prefix-cls} {
  z-index: @layout-sider-fixed-z-index;

  &--fixed {
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100%;
  }

  &--mix {
    top: @header-height;
    height: calc(100% - @header-height);
  }

  &.ant-layout-sider-dark {
    background-color: @sider-dark-bg-color;

    .ant-layout-sider-trigger {
      background-color: @trigger-dark-bg-color;
      color: darken(@white, 25%);

      &:hover {
        background-color: @trigger-dark-hover-bg-color;
        color: @white;
      }
    }
  }

  &:not(.ant-layout-sider-dark) {
    // box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);

    .ant-layout-sider-trigger {
      border-top: 1px solid @border-color-light;
      color: @text-color-base;
    }
  }

  .ant-layout-sider-zero-width-trigger {
    z-index: 10;
    top: 40%;
  }

  & .ant-layout-sider-trigger {
    height: 36px;
    line-height: 36px;
  }
}
</style>
